<template>
	<view class="ss-raffle-turntable" :class="{ disabled: tplDisabled }">
		<view class="ss-raffle-turntable-box">
			<template v-if="prizeList.length">
				<view class="ss-raffle-turntable-box-items" :style="[tplRotatingStyles]">
					<view class="ss-raffle-turntable-box-item" v-for="(item, itemi) in tplItems" :key="itemi"
						:style="[item.itemStyles]">
						<view class="ss-raffle-turntable-box-item__content" :style="[item.contentStyles]">
							<slot v-bind="item">
								<view class="ss-raffle-turntable-box-item__text" v-if="item.giftName">
									{{ item.giftName }}
								</view>
								<view class="ss-raffle-turntable-box-item__image" v-if="item.image">
									<image :src="item.image" />
								</view>
							</slot>
						</view>
					</view>
				</view>
				<!-- :style="[tplButtonRotatingStyles]" -->
				<view class="ss-raffle-turntable-box-button">
					<text>{{ buttonText }}</text>
				</view>
				<view class="ss-raffle-turntable-box-start" @click.stop="handleClick">
					<text>开始抽奖</text>
				</view>
			</template>
			<!-- <view class="ss-raffle-turntable-box-error" v-else>选项未配置</view> -->
		</view>
		<view class="ss-raffle-turntable-start" @click.stop="handleClick">
			<text>开始抽奖</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ss-raffle-turntable',
		props: {
			mode: {
				type: String, //'dish' | 'needle'
				default: 'dish'
			},
			prizeList: {
				type: Array,
				default: () => []
			},
			bgColors: {
				type: Array,
				default: () => []
			},
			textColors: {
				type: Array,
				default: () => []
			},
			buttonText: {
				type: String,
				default: '转起来'
			},
			buttonColor: {
				type: String,
				default: '#ffffff'
			},
			buttonBgColor: {
				type: String,
				default: '#fe4347'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			prizeDrawId: {
				type: String,
				default: ''
			},
			duration: {
				type: Number,
				default: 6000
			},
			onBefore: {
				type: Function
			},
			onStopped: {
				type: Function
			},
		},
		data() {
			return {
				refRunning: false,
				refDeg: 0,
			}
		},
		computed: {
			tplDisabled() {
				return this.refRunning || this.disabled
			},
			degs() {
				const length = this.prizeList.length;
				const count = length > 3 ? length : length === 3 ? 6 : 4;
				return {
					rotate: 360 / count,
					skew: 90 - 360 / count,
				};
			},
			tplItems() {
				const {
					rotate,
					skew
				} = this.degs;
				const length = this.prizeList.length
				let items = [...this.prizeList];
				const bgColors = this.bgColors.concat(['#F8D5D5', '#ffffff', '#c3f8d1']);
				const textColors = this.textColors.concat(['#FF9E9E', '#FF9E9E', '#FF9E9E']);
				if (length < 4) {
					if (length > 1) {
						items = [...items].concat(items);
					} else {
						items = Array(4).fill(items[0]);
					}
				}
				return (items || []).map((item, itemi) => {
					const {
						textColor,
						bgColor,
						...itemParams
					} = item;
					return {
						...itemParams,
						itemStyles: {
							transform: `rotate(${itemi * rotate}deg) skewY(${skew}deg) `,
							backgroundColor: bgColor ?? bgColors[itemi % (length % 2 ? 3 : 2)],
							color: textColor ?? textColors[itemi % (length % 2 ? 3 : 2)],
						},
						contentStyles: {
							transformOrigin: 'bottom right',
							transform: `skewY(-${skew}deg) rotate(-${rotate / 2}deg) translateX(50%)`,
						},
					};
				});
			},
			tplRotatingStyles() {
				const duration = this.refRunning ? this.duration : 0;
				return {
					transition: `transform ${duration}ms ease-in-out`,
					transform: `rotate(${['needle'].includes(this.mode) ? 10 : this.refDeg}deg)`,
				};
			},
			tplButtonRotatingStyles() {
				const duration = this.refRunning ? this.duration : 0;
				return {
					transition: `transform ${duration}ms ease-in-out`,
					transform: `translate(-50%, -50%) rotate(${this.mode === 'needle' ? this.refDeg : 0}deg)`,
				};
			}
		},
		methods: {

			async handleClick() {
				if (this.tplDisabled) {
					return;
				}
				this.refRunning = true;

				const {
					rotate
				} = this.degs;

				// 抽奖结果，由接口返回
				let res = {
					"giftName": "按摩仪",
					"prizeDrawId": "D96933D7E9614CD9A755438C6F3D6629",
					"id": 248,
				}
				// 计算会停在哪里
				const hitIndex = this.prizeList.findIndex(i => i.id == res.id)
				// 
				let targetDeg = hitIndex * rotate - rotate / 2;
				if (['needle'].includes(this.mode)) {
					const length = this.tplItems.length;
					targetDeg = (length + 1 - hitIndex) * rotate - rotate / 2;
				}

				this.refDeg = 3 * 360 * (Math.round(Math.random() * 3) + 3) - targetDeg;
				setTimeout(() => {
					this.refRunning = false;
					this.refDeg = -targetDeg;
					this.onStopped && this.onStopped(res);
				}, this.duration + 100);
			}
		}
	}
</script>

<style lang="scss">
	view,
	text {
		box-sizing: border-box;
	}

	.ss-raffle-turntable {
		position: relative;
		z-index: 3;
		padding: 30rpx;
		width: 496rpx;
		height: 626rpx;
		margin: 0 auto;
		background-image: url('http://assets.shinshen.com/static/draw/turn-bg.png');
		background-size: 100% 100%;
		background-position: center;

		&.disabled {
			opacity: 0.95;
		}

		&-box {
			position: relative;
			width: 400rpx;
			height: 400rpx;
			border-radius: 50%;
			overflow: hidden;
			margin: 0 auto;
			margin-top: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}

			&-error {
				color: red;
				text-align: center;
			}

			&-items {
				width: 100%;
				height: 100%;
				margin: 0 auto;
				border-radius: 50%;
				overflow: hidden;
				position: relative;
				box-shadow: 0 0 4rpx #000;
				animation: all;
			}

			&-button {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				margin: auto;
				background-image: url('http://assets.shinshen.com/static/draw/turn-start.png');
				background-size: 100% 100%;
				background-position: center;
				width: 156rpx;
				height: 190rpx;
				border-radius: 50%;
				// background-color: #fe4347;
				font-size: 32rpx;
				color: #ffffff;
				cursor: pointer;
				padding-top: 20rpx;
				box-sizing: border-box;
				// margin-top: -10rpx;
				// &:before,
				// &:after {
				// 	content: '';
				// 	position: absolute;
				// }

				// &:before {
				// 	top: -60rpx;
				// 	border-width: 32rpx 20rpx;
				// 	border-style: solid;
				// 	border-color: transparent transparent #fe4347;
				// }
			}



			&.disabled {
				.ss-raffle-turntable-button {
					cursor: not-allowed;
					filter: grayscale(100%);
				}
			}

			&-item {
				position: absolute;
				width: 50%;
				height: 50%;
				transform-origin: right bottom 0;
				box-shadow: 0 0 2rpx #FF9E9E inset;

				&__content {
					position: absolute;
					right: 0;
					bottom: 0;
					width: 100%;
					height: 100%;
					padding: 4rpx 0;
					text-align: center;
				}

				&__image {
					width: 84rpx;
					height: 66rpx;
					margin: 0 auto 10rpx;
				}

				&__text {
					font-size: 20rpx;
					white-space: pre-wrap;
					color: #F45D4E;
				}
			}
		}

		&-start {
			position: absolute;
			bottom: -14rpx;
			left: 0;
			right: 0;
			margin: 0 auto;
			text-align: center;
			font-size: 47rpx;
			font-weight: normal;
			color: #F34524;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 372rpx;
			height: 110rpx;
			background-size: 100% 100%;
			background-position: center;
			background-image: url('http://assets.shinshen.com/static/draw/turn-start-bg.png');
		}
	}
</style>